<template>
  <div class="app-container">
    <el-card class="box-card" style="background-color: #e9ecef">
      <div slot="header" class="clearfix">
        <span style="font-size: xx-large">{{ title }}</span>
      </div>
      <el-table
        :data="replyInfo"
        style="width: 100%">
        <el-table-column prop="key" label="配置项"/>
        <el-table-column prop="value" label="配置值"/>
      </el-table>
      <el-divider/>
      <p v-if="replyData.length === 0">你已答辩，点击
        <router-link
          :to="{path: '/student/grade', query: {
            replyId: this.$route.query.replyId
          }}"
          style="color: rgb(64, 158, 255)">
          我的成绩
        </router-link>
        查看成绩详情。
      </p>
      <p v-else-if="replyData.length === 1">当前已有
        {{ replyData[0] }}
        个学生报名答辩，你还尚未预约，点击
        <el-button type="text" style="font-size: medium" @click="handleInline">预约答辩</el-button>
        排队答辩。
      </p>
      <p v-else-if="replyData.length === 2">当前已有
        {{ replyData[0] }}
        个学生报名答辩，你已预约，当前答辩学生序号为
        {{ replyData[1] }}，请你准备答辩。
      </p>
    </el-card>
  </div>
</template>

<script>
import studentReplyApi from '@/api/student/reply'

export default {
  data() {
    return {
      title: '',
      replyInfo: null,
      replyGroup: null,
      replyData: [1, 2, 3, 4, 5]
    }
  },
  created() {
    this.getReplyInfo()
  },
  methods: {
    getReplyInfo() {
      studentReplyApi.getReplyById(this.$route.query.replyId).then(res => {
        this.title = res.result.title
        this.getReplyGroup(res.result)
        this.getReplyData()
      }).catch(error => {
        console.log(error)
      })
    },
    getReplyData() {
      studentReplyApi.getStuDataById(this.$route.query.replyId).then(res => {
        this.replyData = res.result
      }).catch(error => {
        console.log(error)
      })
    },
    getReplyGroup(data) {
      studentReplyApi.getGroupById(data.groupId).then(res => {
        this.replyGroup = res.result.members.map(info => info.name).toString()
        this.replyInfo = [
          {
            key: '教师小组',
            value: data.groupName + '（' + this.replyGroup + '）'
          },
          {
            key: '开始时间',
            value: data.startTime
          },
          {
            key: '结束时间',
            value: data.endTime
          },
          {
            key: '学生匿名打分',
            value: data.weight === 0 ? '否' : data.weight + '%'
          },
          {
            key: '学生自评',
            value: data.selfMark === 1 ? '是' : '否'
          },
          {
            key: '成绩分析',
            value: data.visible === 1 ? '是' : '否'
          },
          {
            key: '答辩年限',
            value: data.config
          }
        ]
      }).catch(error => {
        console.log(error)
      })
    },
    handleInline() {
      studentReplyApi.inline(this.$route.query.replyId).then(res => {
        this.$message({
          message: '预约答辩成功，请准备答辩',
          type: 'success'
        })
        this.getReplyData()
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

